<template>
	<el-card shadow="hover">
		<template #header>
			<div class="row y_center" style="gap: 4px;">
				<el-icon>
					<User />
				</el-icon>
				<span>管理员账号列表</span>
				<div class="tool" style="margin-left: auto;">
					<el-button type="primary" link icon="Plus" @click="edit(null)">添加管理员</el-button>
				</div>
			</div>
		</template>
		<div>
			<el-table :data="accountList" border style="width: 100%" v-loading="listLoading">
				<el-table-column prop="id" label="ID" align="center" width="50" />
				<el-table-column prop="username" label="账号" align="center" />
				<el-table-column prop="nickname" label="昵称" align="center" />
				<el-table-column prop="group_name" label="角色组" align="center">
					<template #default="scope">
						<el-text size="small">{{ scope.row.groupInfo?.name }}</el-text>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="在线状态" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.online_status ? 'success' : 'info'" size="small">{{
							scope.row.online_status ? '在线' : '离线' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="启用/禁用" align="center">
					<template #default="scope">
						<div>
							<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" width="50"
								inline-prompt active-text="启用" inactive-text="禁用" />
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="action" label="操作" align="center" width="200" fixed="right">
					<template #default="scope">
						<el-button link type="info" icon="" size="small" @click="edit(scope.row)">编辑</el-button>
						<el-divider direction="vertical" style="margin: 0 4px;" />
						<el-popconfirm class="box-item" title="删除后不可恢复,确认删除吗?" placement="bottom"
							@confirm="delAccount(scope.row)">
							<template #reference>
								<el-button link type="danger" icon="" size="small"
									:loading="delListLoading[`_${scope.row.id}`]">删除</el-button>
							</template>
						</el-popconfirm>
						<el-divider direction="vertical" style="margin: 0 4px;" />
						<el-popconfirm class="box-item" title="确定要将该管理员强制下线吗?" placement="bottom"
							@confirm="accountOffLine(scope.row)">
							<template #reference>
								<el-button link type="danger" icon="" size="small">强制下线</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<editTem ref="editTem" @editAccountSuccess="getAccountList"></editTem>
	</el-card>
</template>

<script>
import { ElMessage } from 'element-plus'
import { useAccountStore } from '../../../../stores/account'
import editTem from './accountEdit.vue'
import { wsManager } from '../../../../utils/wsManager'
export default {
	components: { editTem },
	data() {
		return {
			accountList: [],
			listLoading: false,
			delListLoading: {},
			delWsHandle: null,
		}
	},
	created() {
		this.getAccountList()
		this.delWsHandle = wsManager.addMessageHandler((data) => {
			if (data.type == 'adminOnlineStatus') {
				this.accountList.forEach((item, index) => {
					if (item.id == data.data.uid) {
						item.online_status = data.data.onlineStatus
					}
				})
			}
		})
	},
	unmounted() {
		this.delWsHandle()
	},

	computed: {
		accountStore() {
			return useAccountStore()
		}
	},
	methods: {
		accountOffLine(row) {
			this.accountStore.accountOffLine(row.id).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				ElMessage.success(res.message)
			}).catch(err => {
				ElMessage.error(err.message)
			})
		},
		edit(itemInfo = null) {
			if (itemInfo) {
				this.$refs.editTem.itemInfo = JSON.parse(JSON.stringify(itemInfo))
			}
			this.$refs.editTem.show = true
		},
		getAccountList() {
			this.listLoading = true
			this.accountStore.getAccountList().then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				this.accountList = res.data.list
			}).catch(err => {
				ElMessage.error("管理员列表加载失败," + err.message)
			}).finally(() => {
				this.listLoading = false
			})
		},
		delAccount(row) {
			this.delListLoading[`_${row.id}`] = true
			this.accountStore.delAccount(row.id).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				this.getAccountList()
				ElMessage.success(res.message)
			}).catch(err => {
				ElMessage.error("删除失败," + err.message)
			}).finally(() => {
				this.delListLoading[`_${row.id}`] = false
			})
		}
	}
}
</script>

<style></style>